<template>
  <f7-page class="bg-unlogin" no-navbar no-toolbar no-swipeback>
    <f7-block>
      <f7-row class="login-bot">
        <f7-col>
          <f7-button big fill @click="loginScreenOpened = true">登录</f7-button>
        </f7-col>
        <f7-col>
          <f7-button href="/register/" big outline>注册</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
      <f7-page login-screen>
        <f7-navbar bg-color="white"></f7-navbar>
        <img src="../../assets/img/bg-login.png" class="img-responsive">
        <form class="list">
          <ul>
            <li class="item-content item-input item-input-with-info">
              <div class="item-inner">
                <div class="item-title item-label">手机号</div>
                <div class="item-input-wrap float-left" style="width:70%;">
                  <input type="text" v-validate="'phone'" name="phone" placeholder="phone" v-model="phone">
                  <span v-show="errors.has('phone')">{{ errors.first('phone') }}</span>
                  <!-- <span class="input-clear-button"></span> -->
                  <!-- <div class="item-input-info">Some information about input field</div> -->
                </div>
                <f7-button class="float-right" style="width:30%;" v-show="!this.$store.state.daoJs" @click="getCode()">获取验证码</f7-button>
                <f7-button class="float-right" style="width:30%; color: grey; border-color:grey " v-show="this.$store.state.daoJs">重新获取{{this.$store.state.daoJs}}</f7-button>
              </div>
            </li>
            <li class="item-content item-input item-input-with-info">
              <div class="item-inner">
                <div class="item-title item-label">验证码</div>
                <div class="item-input-wrap">
                  <input type="text" name="verify_code" placeholder="code" v-model="verify_code">
                  <!--<span v-show="errors.has('verify_code')">{{ errors.first('verify_code') }}</span>-->
                  <!-- <span class="input-clear-button"></span> -->
                  <!-- <div class="item-input-info">Some information about input field</div> -->
                </div>
              </div>
            </li>
          </ul>
        </form>
        <f7-block>
          <f7-button big fill @click="login()">登录</f7-button>
        </f7-block>
        <f7-block class="text-align-center">
          <f7-link @click="close()">关闭</f7-link>
        </f7-block>
      </f7-page>
    </f7-login-screen>
  </f7-page>
</template>

<script>

import utilsCommon from '../../utils/common'
export default {
  data () {
    return {
      loginScreenOpened: false,
      phone: '',
      verify_code: ''
    }
  },

  watch: {
    // 限制手机位数
    phone (newVal, oldVal) {
      if (newVal.length > 11) {
        this.phone = newVal.slice(0, 11)
      }
    }
  },
  methods: {
    async getCode () {
      // 表单校验
      let phonevv = await this.vldt('phone', this.phone)
      if (!phonevv.status) {
        // toast弹窗
        this.toast(phonevv.msg)
        return false
      }
      // 倒计时
      utilsCommon.daoJs(10)
      let getCodeRep = await this.AccountService.getCode({ phone: this.phone })
      if (getCodeRep.data.status === 'success') {
        let param = {
          code: utilsCommon.md5Fun(getCodeRep.data.data.code, 2, 8),
          phone: this.phone,
          package_name: process.env.VUE_APP_PACKAGE
        }
        let getVerifyCodeRep = await this.AccountService.getVerifyCode(param)
        if (getVerifyCodeRep.data.status === 'success') {
          this.verify_code = getVerifyCodeRep.data.data.code
        };
      };
    },
    async login () {
      let param = {
        phone: this.phone,
        verify_code: this.verify_code
      }
      let loginRep = await this.AccountService.login(param)
      if (loginRep.data.status === 'success') {
          let company_id=loginRep.data.data.user.company_id[0];
          let cmpRep = await this.AccountService.getCompanyCard({company_id:company_id});
          this.Storage.set('company',cmpRep.data.data)


        this.$f7.loginScreen.close()
        this.$f7.router.navigate({ url: '/trade/' })
        this.$store.dispatch('connect')
        this.$store.dispatch('updateRefreshState')
      } else {
        alert(loginRep.data.msg)
      };
    },
    close () {
      this.$f7.loginScreen.close()
    }
  }
}
</script>

<style scoped>
.ios .page.bg-unlogin {
  background: #fff url('../../assets/img/bg-unlogin.jpg') no-repeat;
  background-size: cover;
}
.login-bot {
  position: fixed;
  bottom: 15px;
  width: 92%;
}
.ios .navbar:after {
  background: #fff;
}
.ios .list .item-after {
  width: 30%;
}
</style>
